<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="example-1">
        <button v-on:click="counter+=1">Add 1</button>
        <p>你点击了{{counter}}次</p>
    </div>
    <div id="example-2">
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="greet">Greet</button>
    </div>
    <div id="example-3">
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
        <button v-on:click="warn('Form cannot be submitted yet.', $event)">
            Submit
        </button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    //监听事件
    var example1 = new Vue({
        el:"#example-1",
        data:{
            counter:0
        }
    })
    //事件处理方法
    var example2 = new Vue({
        el:"#example-2",
        data:{
           name: "Vue.js" 
        },
        methods:{
            greet:function(event){
                //`this` 在方法里指向当前 Vue 实例
                alert('Hello'+this.name+'!')
                //`event`是原生Dom事件
                if(event){
                    alert(event.target.tagName)
                }
            }
        }
    })
    // example2.greet()
    //内联处理器中的方法
    var example3 = new Vue({
        el: '#example-3',
        //需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
        methods: {
            say: function (message) {
                alert(message)
            },
            warn: function (message, event) {
                // 现在我们可以访问原生事件对象
                if (event) {
                event.preventDefault()
                }
                alert(message)
            }
        }
})
</script>
</html>